<template>
  <!-- 弹窗图片 -->
  <!-- 添加的图片 -->
  <div v-if="visible">


    <div class="dialog-title-yy-information">
      <img src="@/assets/img/module2/content.png" alt="弹窗图片" />
      <img src="@/assets/img/module2/snailtitleicon.png" style="position: absolute; top: -10%; left: 5%" />
      <span class="dialog-title-text-yy-information">方案内容</span>
    </div>

    <button @click="closeDialog" class="botton-shut-icon-yy-information"></button>

    <div class="dialog-container-yy-information">
      <div class="top-section-yy-pr-information">
        <!-- 进度条显示 -->

        <!-- 小圆点 -->
        <div class="jindudian-green-yy-pr-information" style=" left:6% "></div>

        <div
          v-bind:class="{ 'jindudian-green-yy-pr-information': selectedDetails.approvalStatus != 0, 'jindudian-white-yy-pr-information': selectedDetails.approvalStatus === 0 }"
          style=" left:34%"></div>

        <div
          v-bind:class="{ 'jindudian-green-yy-pr-information': selectedDetails.approvalStatus === 2 || selectedDetails.approvalStatus === 3, 'jindudian-white-yy-pr-information': selectedDetails.approvalStatus === 0 || selectedDetails.approvalStatus === 1 }"
          style=" left:62% "></div>

        <div
          v-bind:class="{ 'jindudian-green-yy-pr-information': selectedDetails.approvalStatus === 3, 'jindudian-white-yy-pr-information': selectedDetails.approvalStatus != 3 }"
          style=" left:90% "></div>

        <!-- 进度条 -->
        <div class="jindutiao-white-yy-pr-information" style="left:6%"></div>

        <div v-if="selectedDetails.approvalStatus != 0" class="jindutiao-green-yy-pr-information" style="left:6%"></div>

        <div v-if="selectedDetails.approvalStatus == 2 || selectedDetails.approvalStatus == 3"
          class="jindutiao-green-yy-pr-information" style="left:34%"></div>

        <div v-if="selectedDetails.approvalStatus == 3" class="jindutiao-green-yy-pr-information" style="left:62%"></div>



        <!-- 文字部分 -->
        <span class="jindutiao-text-green-yy-pr-information" style=" left: 3% ">未提交</span>
        <span
          v-bind:class="{ 'jindutiao-text-green-yy-pr-information': selectedDetails.approvalStatus != 0, 'jindutiao-text-white-yy-pr-information': selectedDetails.approvalStatus === 0 }"
          style=" left: 32% ">已提交</span>
        <span
          v-bind:class="{ 'jindutiao-text-green-yy-pr-information': selectedDetails.approvalStatus === 2 || selectedDetails.approvalStatus === 3, 'jindutiao-text-white-yy-pr-information': selectedDetails.approvalStatus === 0 || selectedDetails.approvalStatus === 1 }"
          style=" left: 60% ">审核中</span>
        <span
          v-bind:class="{ 'jindutiao-text-green-yy-pr-information': selectedDetails.approvalStatus === 3, 'jindutiao-text-white-yy-pr-information': selectedDetails.approvalStatus != 3 }"
          style=" left: 86% ">审核完成</span>



      </div>


      <div class="bottom-section-yy-information">


        <!-- 方案名称 -->
        <div style="margin-bottom: 3px; display: flex; align-items: center">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            方案名称
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{ selectedDetails.programName }}</span>
          </div>
        </div>
        <!-- 创建时间 -->
        <div style="margin-bottom: 3px; display: flex; align-items: center">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            创建时间
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{ selectedDetails.applicationAcceptanceTime }}</span>
          </div>
        </div>
        <!-- 用户需求 ID -->
        <div style="margin-bottom: 3px; display: flex; align-items: center">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            用户需求 ID
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{ selectedDetails.id }}</span>
          </div>
        </div>

        <!-- 标题内容 -->
        <div class="select-section-title-yy-information">
          <div class="select-section-titleimg-yy-information"> </div>
          <span class="select-section-titletext-yy-information">空域使用需求信息</span>
        </div>





        <!-- 下拉框 -->
        <div class="select-section-yy-pr-information">


          <div class="select-section-content-yy-pr-information" ref="scrollContainer">

            <el-collapse v-model="activeNames" class="collapse-yy-pr-information" accordion @change="handleChange">

              <el-collapse-item title="起降场信息" name="main1">
                <div class="collapse-content-main1-yy-pr-information">

                  <!-- 内部起降场信息 -->
                  <el-collapse v-model="activeNamesDetail" class="collapse-yy-inner-pr-information" accordion
                    @change="handleChangeDetail">
                    <el-collapse-item v-for="(row, index) in selectedDetails.takeoffLandInfo" :title="row.airportName"
                      :name="index">
                      <div class="takeoffLandInfo-yy-pr-information" style="height:220px">
                        <div class="takeoffLandInfo-head-yy-pr-information">
                          <div
                            v-bind:class="{ 'xuanzedian-green-yy-pr-information': row.airportType === '起飞', 'jindudian-white-yy-pr-information': row.airportType === '降落' }"
                            style=" left:10%;top:25px"></div>
                          <div
                            v-bind:class="{ 'xuanzedian-green-yy-pr-information': row.airportType === '降落', 'jindudian-white-yy-pr-information': row.airportType === '起飞' }"
                            style=" left:50%;top:25px"></div>
                          <div class="font-yy-pr-information" style=" position:absolute;top:23px;left:10%"> 起飞 </div>
                          <div class="font-yy-pr-information" style=" position:absolute;top:23px;left:50%"> 降落 </div>
                        </div>
                        <div class="font-yy-pr-information" style=" margin-top:32px"> 类型：{{ row.landingZoneType }}
                        </div>


                        <div class="font-yy-pr-information" style="margin-top:35px"> 经度信息：{{
                          formatCoordinate(row.latitude) }}
                        </div>


                        <div class="font-yy-pr-information" style="margin-top:35px">
                          纬度信息：{{ formatCoordinate(row.longitude) }}
                        </div>

                      </div>
                    </el-collapse-item>


                  </el-collapse>
                </div>
              </el-collapse-item>

              <el-collapse-item title="航路信息" name="main2">
                <div class="collapse-content-main2-yy-pr-information">


                  <el-collapse v-model="activeNamesDetail" class="collapse-yy-inner-pr-information" accordion
                    @change="handleChangeDetail">

                    <el-collapse-item v-for="(row, index) in selectedDetails.airlineInfo" :title="row.routeName"
                      :name="index">
                      <div class="collapse-content-yy-pr-information">
                        <div class="takeoffLandInfo-yy-pr-information" style="height: 190px">
                          <div class="font-yy-pr-information" style=" margin-top: 25px"> 类型：{{
                            row.routeType }} </div>
                          <div class="font-yy-pr-information" style=" margin-top: 35px"> 坐标信息：{{
                            row.coordinateInformationPoints }} </div>
                          <div class="font-yy-pr-information" style=" margin-top: 35px"> 可用高度层信息：{{
                            row.heightIntervalTest }} </div>




                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>

              </el-collapse-item>

              <el-collapse-item title="作业区域信息" name="main3">
                <div class="collapse-content-main3-yy-pr-information">

                  <el-collapse v-model="activeNamesDetail" class="collapse-yy-inner-pr-information" accordion
                    @change="handleChangeDetail">

                    <el-collapse-item v-for="(row, index) in selectedDetails.workInfo" :title="row.operationAreaName"
                      :name="index">
                      <div class="collapse-content-yy-pr-information">
                        <div class="takeoffLandInfo-yy-pr-information" style="height: 230px">
                          <div class="font-yy-pr-information" style=" margin-top: 25px"> 类型：{{ row.operationAreaType }}
                          </div>
                          <div class="font-yy-pr-information" style=" margin-top: 35px"> 作业种类：{{ row.operationType }}
                          </div>
                          <div class="font-yy-pr-information" style=" margin-top: 35px;"> 坐标信息：{{
                            row.coordinateInformationPoints }} </div>
                          <div class="font-yy-pr-information" style=" margin-top: 35px"> 高度区间：{{
                            row.heightIntervalTest }} </div>




                        </div>

                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>

              </el-collapse-item>

              <el-collapse-item title="特殊空域信息" name="main4">
                <div class="collapse-content-main4-yy-pr-information">

                  <el-collapse v-model="activeNamesDetail" class="collapse-yy-inner-pr-information" accordion
                    @change="handleChangeDetail">

                    <el-collapse-item v-for="(row, index) in selectedDetails.specialInfo"
                      :title="row.specialAirspaceName" :name="index">
                      <div class="collapse-content-yy-pr-information">
                        <div class="takeoffLandInfo-yy-pr-information" style="height: 180px">
                          <div class="font-yy-pr-information" style=" left:10%;margin-top:25px;"> 类型：{{
                            row.specialAirspaceType
                            }} </div>
                          <div class="font-yy-pr-information" style=" left:10%;margin-top:35px;"> 坐标信息：{{
                            row.coordinateInformationPoints }} </div>
                          <div class="font-yy-pr-information" style=" left:10%;margin-top:35px;"> 高度区间：{{
                            row.heightIntervalTest }} </div>


                        </div>
                      </div>
                    </el-collapse-item>

                  </el-collapse>

                </div>
              </el-collapse-item>
            </el-collapse>


            <div class="tianchong-yy-pr-information"></div>
          </div>






        </div>



        <!-- <button class="button-test" @click="testClick()">{{ activeNames }}{{ activeNamesDetail }}</button> -->
        <button v-if="selectedDetails.approvalStatus == 0" class="submit-button-yy-information"
          @click="submitClick()">提交</button>
        <button v-if="selectedDetails.approvalStatus == 1" class="withdraw-button-yy-information"
          @click="withdrawClick()">撤销</button>
        <button v-if="selectedDetails.approvalStatus == 2" class="ban-submit-button-yy-information">提交</button>
        <button v-if="selectedDetails.approvalStatus == 3" class="ban-submit-button-yy-information">提交</button>



      </div>



    </div>
  </div>

</template>


<script>
export default {
  name: "CustomDialogModule2PlanningScheme",

  data() {
    return {
      selectedVenue: "",
      selectedLine: "",
      selectedRegion: "",
      activeNames: [],
      activeNamesDetail: [],

    }
  },

  props: {
    selectedDetails: {
      required: true,
    },

    visible: {
      type: Boolean,
      required: true,
    },
  },

  methods: {
    closeDialog() {
      this.$emit("update:visible", false); // 通知父组件关闭弹窗
    },
    getStatusPercentage(status) {
      switch (status) {
        case "未提交":
          return 0;
        case "已提交":
          return 25;
        case "审核中":
          return 75;
        case "审核完成":
          return 100;
        default:
          return 0;
      }
    },
    submitClick() {
      this.$emit("submitClickTransfer");
    },
    withdrawClick() {
      this.$emit("withdrawClickTransfer");
    },
    formatCoordinate(coord) {
      const degrees = Math.floor(coord);
      const minutes = Math.floor((coord - degrees) * 60);
      const seconds = (((coord - degrees) * 60 - minutes) * 60).toFixed(1);
      return `${degrees}°${minutes}'${seconds}"`;
    },
    scrollToTop() {

      // 获取容器与目标项的位置信息
      const scrollContainer = this.$refs.scrollContainer;
      const targetItem = this.$refs.scrollContainer.querySelector('.el-collapse-item.is-active');
      // console.log("targetItem: ", targetItem);
      // console.log("scrollContainer: ", scrollContainer);
      if (scrollContainer && targetItem) {
        // console.log("targetItem.getBoundingClientRect().top: ", targetItem.getBoundingClientRect().top);
        // console.log("scrollContainer.getBoundingClientRect().top: ", scrollContainer.getBoundingClientRect().top);
        // console.log("scrollContainer.scrollTop: ", scrollContainer.scrollTop);
        // console.log("targetPosition: ", targetPosition);
        // 将滚动容器滚动到对应内容
        // console.log("scrollHeight:", scrollContainer.scrollHeight); // 容器的可滚动总高度
        // console.log("clientHeight:", scrollContainer.clientHeight);
        setTimeout(() => {
          const targetPosition = targetItem.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
          scrollContainer.scrollTo({
            top: targetPosition,
            behavior: "smooth", // 平滑滚动
          },

          )
        }, 300)
        // console.log("scrollHeight:", scrollContainer.scrollHeight); // 容器的可滚动总高度
        // console.log("clientHeight:", scrollContainer.clientHeight);
        setTimeout(() => {
          console.log("scrollContainer.scrollTop:", scrollContainer.scrollTop);
          console.log("执行scrollToTop");
        }, 0)
      }
    },


    scrollToTopDetail() {

      // 获取容器与目标项的位置信息
      const scrollContainer = this.$refs.scrollContainer;
      let targetItem
      if (this.activeNames.includes('main1')) {
        targetItem = scrollContainer.querySelector('.collapse-content-main1-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active');
      } else if (this.activeNames.includes('main2')) {
        targetItem = scrollContainer.querySelector('.collapse-content-main2-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active');
      } else if (this.activeNames.includes('main3')) {
        targetItem = scrollContainer.querySelector('.collapse-content-main3-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active');
      } else if (this.activeNames.includes('main4')) {
        targetItem = scrollContainer.querySelector('.collapse-content-main4-yy-pr-information .collapse-yy-inner-pr-information .el-collapse-item.is-active');
      }

      // console.log("targetItem: ", targetItem);
      // console.log("scrollContainer: ", scrollContainer);
      if (scrollContainer && targetItem) {

        setTimeout(() => {

          const targetPosition = targetItem.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
          // console.log("targetItem.getBoundingClientRect().top: ", targetItem.getBoundingClientRect().top);
          // console.log("scrollContainer.getBoundingClientRect().top: ", scrollContainer.getBoundingClientRect().top);
          // console.log("scrollContainer.scrollTop: ", scrollContainer.scrollTop);
          // console.log("targetPosition: ", targetPosition);
          // 将滚动容器滚动到对应内容
          // console.log("scrollHeight:", scrollContainer.scrollHeight); // 容器的可滚动总高度
          // console.log("clientHeight:", scrollContainer.clientHeight);      
          scrollContainer.scrollTo({
            top: targetPosition,
            behavior: "smooth", // 平滑滚动
          },
          )

        }, 300)
        // console.log("scrollHeight:", scrollContainer.scrollHeight); // 容器的可滚动总高度
        // console.log("clientHeight:", scrollContainer.clientHeight);
        // setTimeout(() =>{console.log("scrollContainer.scrollTop:",scrollContainer.scrollTop);
        // console.log("执行scrollToTop");},1)
      }



    },

    refreshChange(){
      this.activeNamesDetail = [];
      this.activeNames = [];
      this.$refs.scrollContainer.scrollTop=0;

    },

    handleChange(val) {
      // console.log('handleChange: ', val);
      if (val.length > 0) {
        this.activeNamesDetail = [];
      } else {
        this.activeNamesDetail = [];
      }

      this.$nextTick(() => {
        this.scrollToTop();
      });
    },

    handleChangeDetail() {
      this.$nextTick(() => {
        this.scrollToTopDetail();
        this.$emit('entity-change', this.activeNames, this.activeNamesDetail) ;
      // console.log(this.activeNames);
      // console.log(this.activeNamesDetail);
      });
      // console.log('触发点击');
      // console.log(this.activeNames);
      // console.log(this.activeNamesDetail);
      
    },
    testClick() {
      this.activeNames = ["main3"];
      this.activeNamesDetail = [0];
      this.$nextTick(() => { this.scrollToTopDetail(); })
    },

    clickGis(mainid, indexid) {
      this.activeNames = []
      this.activeNamesDetail = []
      this.activeNames.push(mainid)
      this.activeNamesDetail.push(indexid)
      this.$nextTick(() => { this.scrollToTopDetail(); })
    },


  }



}

</script>





<style scoped>
.botton-shut-icon-yy-information {
  background-image: url('@/assets/img/nav/关闭.png');
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 75%;
  top: 5%;
  width: 40px;
  height: 40px;
  z-index: 3;
  border: none;
  cursor: pointer;
  /* filter: brightness(0.1); */
  pointer-events:auto;

}

.dialog-title-yy-information {
  width: 62%;
  position: absolute;
  top: 5%;
  left: 5%;
  /* background-color: white; */
}

.dialog-title-text-yy-information {
  position: absolute;
  top: 5%;
  left: 17%;
  overflow-wrap: break-word;

  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.dialog-container-yy-information {
  background-image: url("@/assets/img/module2/bg.png");
  background-size: 100% 100%;
  /* background-color:white; */
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  height: 88%;
  position: absolute;
  top: 10%;
  left: 5%;
  padding: 0px;
  flex-grow: 1;
  pointer-events:auto;

}




.top-section-yy-information {
  /* z-index: 10; */
  /* position:absolute; */


  margin-bottom: 5%;
  margin-top: 5%;
  left: 0%;
  height: 8%;
  top: 5%;
  /* display: block; */
  /* background-color: blue; */
}

.jindudian-green-yy-information {
  background-color: rgba(151, 223, 117, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindudian-white-yy-information {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindutiao-white-yy-information {
  position: absolute;
  left: 8%;
  top: 5.3%;
  width: 86%;
  height: 10px;
  background-image: url("@/assets/img/module2/whiteline.png");
  background-size: 100% 100%;
  background-color: transparent;
}

.jindutiao-green-yy-information {
  position: absolute;
  top: 5.3%;
  width: 30%;
  height: 10px;
  background-image: url("@/assets/img/module2/greenline.png");
  background-size: 100% 100%;
  background-color: transparent;
  z-index: 200;
}

.jindutiao-text-green-yy-information {
  overflow-wrap: break-word;
  color: rgba(151, 223, 117, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 7.5%
}

.jindutiao-text-white-yy-information {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 7.5%
}

.progress-labels-yy-information {
  position: absolute;
  color: white;
  top: 7%;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
}

.bottom-section-yy-information {
  position: absolute;
  /* background-color: white; */
  left: 0%;
  top: 11%;
  width: 100%;
  height: 85%;
  /* margin-left: 15px;
  flex-grow: 1; */
}

.select-section-yy-information {
  background-image: url("@/assets/img/module2/bg.png");
  background-size: 100% 100%;
  position: absolute;
  /* background-color:transparent; */
  left: 6%;
  top: 215px;
  width: 88%;
  height: 190px;

}

.select-section-title-yy-information {
  /* background-image: url("@/assets/img/module2/selecttitle.png"); */
  /* background-color: #fff; */

  position: absolute;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  /* background-color: white; */
  width: 100%;
  height: 50px;

}

.select-section-titleimg-yy-information {
  position: absolute;
  left: 6%;
  top: 22%;
  width: 7%;
  height: 44%;
  background-image: url('@/assets/img/module2/titlelist.png');
  background-size: 100% 100%;
  background-color: transparent;

}


.select-section-titletext-yy-information {
  position: absolute;
  top: 23%;
  left: 15%;
  /* transform: translate(0%, -50%); */
  font-size: 18px;
  font-weight: 300;

}

.jindudian-green-yy-pr-information {
  background-color: rgba(151, 223, 117, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindudian-white-yy-pr-information {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}


.dropdown-container-yy-information {
  /* background-color: white; */
  position: absolute;
  top: 25%;
  left: 0%;
  height: 75%;
  width: 100%;
}

.dropdown-yy-information {
  position: relative;
  left: 15%;
  width: 70%;
  height: 20%;
  margin-top: 5%;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  color: white;
  font-weight: 600;
  background-color: black;
  font-size: 20px;
}

.dropdown-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
}

.submit-button-yy-information {
  background-image: url('@/assets/img/module2/button-tijiao.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 8%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.ban-submit-button-yy-information {
  background-image: url('@/assets/img/module2/button-tijiao.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 8%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: not-allowed;
  filter: grayscale(100%);
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.withdraw-button-yy-information {
  background-image: url('@/assets/img/module2/button-bohui.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 8%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.up-content-text-yy-information {
  margin-right: 3%;
  text-align: right;
  width: 27%;
  z-index: 2000;
}



.info-box-yy-information {
  position: relative;
  background-image: url("@/assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.info-box-text-yy-information {
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.info-box-yy-ps-information {
  position: relative;
  background-image: url("@/assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.select-yy-information {
  background-color: transparent;
  border: none;
  color: rgba(208, 219, 227, 1);
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding-left: 10%;
  z-index: 3000;

}

.select-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
  border: none;
}
</style>